<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>编辑管理信息</title>

    <base href="http://localhost/shop-resources/back/">

    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css"/>
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="pd-20">
    <form action="abc" method="post" class="form form-horizontal" id="form-admin-edit">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" th:value="${user.username}"
                       placeholder="" id="username" name="username" datatype="*2-16" nullmsg="用户名不能为空">
                <input type="hidden" class="input-text" th:value="${user.id}"
                       placeholder="" id="id" name="id">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>密码：</label>
            <div class="formControls col-5">
                <input type="password" placeholder="密码" name="password" autocomplete="off" th:value="${user.password}"
                       class="input-text"
                       datatype="*6-20" nullmsg="密码不能为空">

            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-5 skin-minimal">
                <div class="radio-box">
                    <input type="radio" id="sex-1" value="1" th:field="*{user.sex}" name="sex" datatype="*" nullmsg="请选择性别！">
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" value="2" th:field="*{user.sex}" name="sex">
                    <label for="sex-2">女</label>
                </div>
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>手机：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" th:value="${user.phone}" placeholder="" id="phone" name="phone"
                       datatype="m" nullmsg="手机不能为空">
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" th:value="${user.email}" placeholder="@" name="email" id="email"
                       datatype="e" nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>生日：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" name="birthday" id="birthday"
                       datatype="*" readonly nullmsg="请输入生日日期！" th:value="${#dates.format(user.birthday,'yyyy-MM-dd')}" onClick="WdatePicker({lang:'zh-cn'})">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="http://localhost/shop-resources/back/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript">
    $(function () {
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        // 1.用户填写表单
        // 2、用户点击提交按钮
        // 3、表单实现校验
        //         a)验证不通过，提示错误的信息
        //         b)验证通过表单不能自动提交，需要我们手动使用ajax提交
        $("#form-admin-edit").Validform({
            tiptype: 2,
            // //注意：如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，
            // 然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。
            callback: function (form) {
                // 在这里表单数据使用异步的方式提交
                // 1.把表单对象序列化成数组
                var fromArray = form.serializeArray();

                // 2.创建一个对象，把表单中的所有属性封装到param对象中
                var param = new Object();

                // 3.循环遍历数组，把数组中的值给他复制到param对象
                for (var i = 0; i < fromArray.length; i++) {
                    var name = fromArray[i].name; // 表单元素的name属性
                    var val = fromArray[i].value; // 表单元素对应的值

                    // 复制
                    param[name]=val; // 给param对象中设置属性
                }

                console.info(param);

                // 4.使用ajax发送param数据到后台
                $.post("http://localhost/shop-back/userController/updateUser",param,function(data){

                    // 1.判断这个请求是否处理成功了
                    if(data.status == "success"){
                        layer.msg('操作成功', {icon: 1,time:1000},function(){
                            // 这里被调用说明提示层已经关闭了
                            // 关闭添加用户的层
                            // 获取添加用户页面的层的索引
                            var index = parent.layer.getFrameIndex(window.name);
                            // 关闭层
                            parent.layer.close(index);
                            //刷新
                            window.parent.location.reload();
                        });
                        // 提示用户操作成功，然后关闭添加用户的层
                    }else{
                        layer.msg(data.msg, {icon: 2,time:1000});
                    }

                },"JSON");

                // form[0].submit();
                // var index = parent.layer.getFrameIndex(window.name);
                // parent.$('.btn-refresh').click();
                // parent.layer.close(index);
                return false;  // return false，则表单不会提交，
            }
        });
    });
</script>
</body>
</html>